<template>
  <div>
    <van-row @click="toShowLoginPopup">
      <van-col span="6"><img :src="avatarSrc" alt="" /></van-col>
      <van-col span="10">{{ nickname }}</van-col>
      <van-col span="8"
        ><van-icon :name="icon" @click="toShowDialog"
      /></van-col>
    </van-row>

    <van-grid :column-num="3" icon-size="30px">
      <van-grid-item
        v-for="item in girdArr"
        :key="item.id"
        :icon="item.icon"
        :text="item.type"
      />
    </van-grid>

    <van-popup v-model="isShowLoginPopup">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { UserLogin } from "@/request/api";
import avatarSrc from "../assets/avatar.png";
import { mapState, mapMutations } from "vuex";
export default {
  created() {
    //登录成功之后,页面一刷新,头像和昵称又回到默认值。
    //所以，在来到这个页面的时候，应该先获取userInfo。如果获取到了,就应该填到页面上
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      this.avatarSrc = userInfo.avatar;
      this.nickname = userInfo.nickname;
      this.icon = "cross";
    }
  },
  data() {
    return {
      girdArr: [
        { id: 0, icon: "label-o", type: "我的订单" },
        { id: 1, icon: "bill-o", type: "优惠券" },
        { id: 2, icon: "goods-collect-o", type: "礼品卡" },
        { id: 3, icon: "location-o", type: "我的收藏" },
        { id: 4, icon: "flag-o", type: "我的足迹" },
        { id: 5, icon: "contact", type: "会员福利" },
        { id: 6, icon: "aim", type: "地址管理" },
        { id: 7, icon: "warn-o", type: "账号安全" },
        { id: 8, icon: "service-o", type: "联系客服" },
        { id: 9, icon: "question-o", type: "帮助中心" },
        { id: 10, icon: "smile-comment-o", type: "意见反馈" },
      ],
      avatarSrc,
      isShowLoginPopup: false,
      username: "",
      password: "",
      nickname: "点击登录",
      icon: "arrow",
      isShowDialog: false,
    };
  },
  methods: {
    ...mapMutations({ changeIsGoBack: "isGoBack/changeIsGoBack" }),

    onSubmit(values) {
      // console.log("submit", values, values["用户名"], values["密码"]);
      UserLogin({
        username: values["用户名"],
        pwd: values["密码"],
      }).then((res) => {
        // console.log(res);
        //登录成功
        //1.提示用户登录成功
        this.$toast.success("登录成功！");
        //2.保存token值，和用户的基本信息userInfo到本地存储
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
        //3.关闭登录窗口
        this.isShowLoginPopup = false;
        //4.修改页面上的用户头像，用户昵称等信息
        this.avatarSrc = res.data.userInfo.avatar;
        this.nickname = res.data.userInfo.nickname;
        this.icon = "cross";

        //5.跳转回原来的页面
        //并不是所有的情况，登录之后都要跳转回上级路由的，如果是用户主动来到登录页面，进行登录，应该仍然停留在/user页面。
        //这时，我们需要一个变量，来决定是否应该返回上一级(this.$router.go(-1))。
        //这个变量可能被任意组件所修改,所以最优选择还是把这个变量放在Vuex中。

        //需要在'utils'的 强制登录功能 跳转之前 先把 isGoBack 改成true。
        if (this.isGoBack) {
          this.changeIsGoBack(false);
          this.$router.go(-1);
          
        }
      });
    },
    toShowLoginPopup() {
      let token = localStorage.getItem("token");
      if (token) {
        return;
      }
      this.isShowLoginPopup = true;
    },
    toShowDialog() {
      // console.log('执行了');
      //先判断有没有登录，如果没有登录，就return
      let token = localStorage.getItem("token");
      if (!token) {
        return;
      }
      this.isShowDialog = true;
      this.$dialog
        .confirm({
          title: "确认退出登录？",
          message: "",
        })
        .then(() => {
          // on confirm
          this.$toast.success("退出登录成功!");
          //删除token
          localStorage.removeItem("token");
          localStorage.removeItem("userInfo");
          //修改样式为未登录之前
          //this.$router.go(0)刷新当前页面 就不用修改样式
          this.avatarSrc = avatarSrc;
          this.nickname = "点击登录";
          this.icon = "arrow";
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  computed: {
    ...mapState({
      isGoBack: (state) => state.isGoBack.isGoBack,
    }),
  },
};
</script>
 
<style lang = "less" scoped>
.van-row {
  padding: 0.2rem 0.1rem;
  color: #fff;
  background-color: #333;
  .van-col {
    line-height: 0.7rem;
    img {
      display: block;
      width: 0.7rem;
      border-radius: 50%;
    }
    &:last-child {
      text-align: right;
    }
  }
}
.van-popup {
  width: 95%;
}
.van-button {
  border-color: #f40;
  background-color: #f40;
}
/deep/.van-grid-item__content {
  padding: 40px 10px;
}
</style>